<template>
	<view @click.stop="clickShualianBtnHandler"
		:class="{actionBtn: true, actionBtn0: position == 0, actionBtn1: position == 1, actionBtn2: position == 2, actionBtn3: position == 3 }"
		v-if="isShowRenlian()">
		刷脸认证

		<view v-if="show_kefu" @click="show_kefu =false"
			style="width: 100vw;height: 100vh;display: block;position: fixed;top: 0px;background-color: rgba(0,0,0,.3);left: 0px;z-index: 1999990;">
		</view>
		<view v-if="show_kefu"
			style="width: 80vw;height: 40vw;background-color: rgb(255, 255, 255);position: fixed;left: calc(10vw - 10px);z-index: 1999990;border-radius:  10px;padding:  10px;text-align:  center;top: 20vh;">
			<view style="padding: 25px 10px;">由于未知原因初始化扫脸失败,请通过电话联系客服，客服电话号码：{{serviceTel}}</view>
			<button type="primary" @click="call_user()" style="width: 80%;margin: auto;">一键拨打电话</button>
		</view>
	</view>

</template>

<script>
	// 刷脸认证按钮
	import {
		checkPosition,
		getOrderId,
		notifyTopPageRefresh
	} from "../utils/checkShowBtn"
	import {
		startAPVerify
	} from "../../../../utils/platform"

	export default {
		name: "shualianrenzheng",

		data() {
			return {
				serviceTel: "请在个人中心联系客服",
				show_kefu: false,



				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,
			}
		},

		props: {
			order: {
				type: Object,
				default: {},
			}, // 订单对象
			isUsedInList: {
				type: Boolean,
				default: true,
			}, // 是否使用在订单列表页面
		},

		computed: {
			position: function() {
				return checkPosition.shualianrenzheng(this.order, this.isUsedInList)
			}
		},
		methods: {
			//判断去支付或者去签约是否显示按钮
			isShowRenlian() {
				if (this.order.status == '04' && this.order.faceAuthStatus == '01') {
					return true
				} else {
					return false
				}
			},
			call_user() {
				let that = this;
				uni.makePhoneCall({
					phoneNumber: that.serviceTel
				})
			},
			/**
			 * 监听点击刷脸认证按钮
			 */
			clickShualianBtnHandler() {
				let that = this;

				this.serviceTel = uni.getStorageSync("serviceTel") || this.serviceTel;

				if (this.fetching) return // 已经处于请求中状态
				this.fetching = true
				const postObj = {
					orderId: getOrderId(this.order)
				}
				const cnMap = {
					orderId: "订单ID"
				}
				const {
					postData,
					pass
				} = this.$postDataGuard(postObj, cnMap)
				if (!pass) return // 缺少了订单ID参数
				// 首先获取刷脸链接以及id
				this.$request("order/mall/api/order/getFaceAuthCertifyUrl", postData, "post").then(res => {
					const faceParamsData = res.data
					return faceParamsData

				}).then(faceParams => {


					if (!faceParams.faceUrl) {
						console.log("获取刷脸URL失败", faceParams)
						that.show_kefu = true;
						uni.showToast({
							title: "初始化失败",
							icon: "none"
						});
						return false;
					}



					// #ifdef APP-PLUS

					plus.runtime.openURL(
						'alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode=' +
						encodeURIComponent(faceParams.faceUrl)); //打开支付宝刷脸流程
					setInterval(function() {
						notifyTopPageRefresh.apply(this);
					}, 2000)

					//刷脸认证需要等待返回数据。。。。。。。。。。。。。。
					return true;

					// #endif


					// 然后接着利用接口返回的参数唤醒支付宝的人脸
					return startAPVerify(faceParams).then(verifyResult => {
						// 参考老版本的逻辑是不论人脸认证成功与否，都将人脸结果上报给后端了；但是对于简版小程序来说，问过后端之后只有成功时才需要调用
						if (verifyResult.resultStatus === "9000") { // 表明刷脸认证成功
							// 在然后把人脸验证结果同步给后端
							const cid = verifyResult && verifyResult.result && verifyResult.result
								.certifyId
							if (!cid) return
							const queryData = {
								certifyId: cid,
								passed: true
							}
							return this.$request("order/mall/api/order/faceAuthInitAsync", queryData, "get")
								.then(() => {
									notifyTopPageRefresh.apply(this)
									uni.showToast({
										title: "认证成功"
									})
									return
								})
						} else {
							that.fetching = false;
							console.log("刷脸失败", verifyResult)
						}
					})
				}).finally(() => {
					return false;
					this.fetching = false;

				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.actionBtn {
		width: 138rpx;
		height: 56rpx;
		border-radius: 30rpx;
		border: 1px solid #c0c0c0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-left: 24rpx;
		flex-shrink: 0;
		float: right;
		// position: absolute;
	}

	.actionBtn {
		position: relative;
	}
</style>